<template>
  <!--$route.path等于当前路由对象的路径 -->
  <!--'/about' === $route.path 如果为真 active就存在-->
  <!--<ul class="footer">
    <li :class="{active: '/home' === $route.path}" @click="goTo('/home')">
      <span class="iconfont iconyemian"></span>
      <p>首页</p>
    </li>
    <li :class="{active: '/about' === $route.path}" @click="goTo('/about')">
      <span class="iconfont iconbf-icon-about" ></span>
      <p>关于</p>
    </li>
    <li :class="{active: '/add' === $route.path}" @click="goTo('/add')">
      <span class="iconfont iconicon02"></span>
      <p>添加</p>
    </li>
    <li :class="{active: '/add' === $route.path}" @click="goTo('/add')">
      <span class="iconfont iconicon02"></span>
      <p>添加</p>
    </li>
  </ul>-->
  <ul class="footer">
    <li @click="goTo('/home')">
     <img :src="'/home' === $route.path ? footData[0].selected : footData[0].normal" alt="首页"/>
      <p :class="{active: '/home' === $route.path}">首页</p>
    </li>
    <li @click="goTo('/about')">
      <img :src="'/about' === $route.path ? footData[1].selected : footData[1].normal" alt="关于"/>
      <p :class="{active: '/about' === $route.path}">关于</p>
    </li>
    <li @click="goTo('/message')">
      <img :src="'/message' === $route.path ? footData[2].selected : footData[2].normal" alt="信息"/>
      <p :class="{active: '/message' === $route.path}">vuex</p>
    </li>
    <li @click="goTo('/add')">
      <img :src="'/add' === $route.path ? footData[3].selected : footData[3].normal" alt="添加"/>
      <p :class="{active: '/add' === $route.path}">添加</p>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      footData: [
        {
          normal: require('@/assets/images/icon1.jpg'),
          selected: require('@/assets/images/icon1_1.jpg')
        },
        {
          normal: require('@/assets/images/icon2.jpg'),
          selected: require('@/assets/images/icon2_1.jpg')
        },
        {
          normal: require('@/assets/images/icon3.jpg'),
          selected: require('@/assets/images/icon3_1.jpg')
        },
        {
          normal: require('@/assets/images/icon4.jpg'),
          selected: require('@/assets/images/icon4_1.jpg')
        }
      ]
    }
  },
  methods: {
    goTo (path) {
      this.$router.replace(path) // replace 替换路由，没有历史记录
    }
  }
}
</script>

<style lang="stylus" scoped>
  .footer
    display flex
    justify-content space-around
    text-align center
    background lemonchiffon
    position fixed
    bottom 0
    left 0
    z-index 999
    width 100%
    padding 10px 0
    li
      color darkgrey
      span
        font-size 48px
      img
        width 48px
        margin-bottom 3px
      p
        font-size 25px
        margin-top 6px
      .active
        color: #02a774
</style>
